<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>海数云</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/static/js/base.js"></script>
    <style>
        /*总体布局*/
        .index-bg{
            width: 100%;
            height:100%;
            background: url("static/images/login-bg.jpg") fixed no-repeat;
            background-size:cover;
            position: fixed;
            opacity: 1;
            z-index: -1;
        }
        .wrap{
            width: 1440px;
            height: 800px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            /*border:1px red solid;*/
        }
        .login-wrap{
            width: 540px;
            height: 560px;
            display: flex;
            /*justify-content: center;*/
            flex-direction: column;
            align-items: center;
            background: #FFFFFF;
            .login-title-wrap{
                width: 540px;
                height: 120px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: #b4bbc5;
                .login-title{
                    width: 540px;
                    display: flex;
                    justify-content: space-around;
                    margin-bottom: 20px;
                    font-weight: bold;
                    font-size: 24px;
                }
                .login-slogan{
                    opacity: 0.5;
                }
            }
            .login-account-wrap{
                display: flex;
                flex-direction: column;
            }
            .login-account-wrap .phone-email, .login-account-wrap .password{
                width: 480px;
                height: 60px;
                padding-left: 20px;
                margin-top: 20px;
                border-radius: 5px;
                border: 1px solid rgba(220, 220, 220, 0.5);
            }
            .login-btn{
                width: 480px;
                height: 60px;
                margin-top: 20px;
                border-radius: 5px;
                background: #8B9CAC;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                color:#FFFFFF;
            }
            .agreement{
                margin-top: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                opacity: 0.4;
            }
            .code-wrap{
                margin-top: 20px;
                height: 60px;
                width: 480px;
                border-radius: 5px;
                display: flex;
                flex-direction: row;
                .code{
                    width: 260px;
                    border-radius: 5px;
                    padding-left: 20px;
                    border: 1px solid rgba(220, 220, 220, 0.5);
                }
                .code-btn{
                    width: 200px;
                    border-radius: 5px;
                    margin-left: 20px;
                    background: #8B9CAC;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color:#FFFFFF;
                    font-size: 21px;
                }
            }
        }
        .tip-box{
            position: absolute;
            width: 1440px ;
            padding-right: 50px;
            height: 50px ;
            /*border: 1px red solid;*/
            right:50px;
            bottom: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 24px;
            color:#FFFFFF;
        }
        .tip-icon{
            width: 24px;
            height: 24px;
            opacity: 0.6;
            margin-right: 10px;
            background: url("static/images/eye.png") 100% 100%;
            background-size: contain;
        }
    </style>
</head>
<body>
<div class="index-bg"></div>
<div class="wrap">
    <div class="login-wrap">
        <div class="login-title-wrap">
            <div class="login-title">注册个人账号</div>
            <div class="login-slogan">找商机，谈合作，拓人脉，求帮助</div>
        </div>
        <div class="login-account-wrap">
            <input class="phone-email" placeholder="请输入手机号" name="phone-email">
            <input class="password"  placeholder="请输入密码" name="password">
            <div class="code-wrap">
                <input class="code" placeholder="请输入验证码" name="code">
                <div class="code-btn" onclick="getSMS()">获取验证码</div>
            </div>
            <div class="login-btn" onclick="registerPhonePersonal()">注册</div>
            <div class="agreement">登录即表示您同意《用户协议》及《隐私政策》</div>
        </div>
    </div>
    <div class="tip-box">
        <div class="tip-icon"></div>
        <div class="tip-title">山城老火锅</div>
    </div>
</div>
<script>
    //获取手机验证码
    function getSMS(){
        let phone = $(".phone-email").val();
        $.ajax({
            type:'post',
            url:`${baseUrl}/api/sms/send`,
            data:{
                "mobile":phone,
            },
            success:function(res){
               if ( res.code !== 200){
                   alert('获取手机验证码失败！');
               }
            },
            error:function(res){
                alert('fail');
            }
        });
    }

    //手机注册
    function registerPhonePersonal(){
        // type	number	是	账户类型：0=个人 1=公司 2=社团
        // title	string	否	公司名称或者社团组织名称，账户类型为公司或者社团的时候为必填字段
        // mobile	number	是	手机号
        // password	string	是	密码
        // code    	number	是	短信验证码

        let phone = $(".phone-email").val();
        let password = $(".password").val();
        let code = $(".code").val();
        $.ajax({
            type:'post',
            url:`${baseUrl}/api/account/register`,
            data:{
                "type": 0,
                "mobile":phone,
                "password":password,
                "code":code
            },
            success:function(res){
                console.log(res);
                if ( res.code === 200){
                    //注册成功
                    let userinfo = res.data.userinfo;
                    let tokenValue =  res.data.userinfo.token;
                    let currentTime = new Date().getTime();
                    window.localStorage.setItem("token", JSON.stringify({value:tokenValue,time:currentTime}));
                    window.localStorage.setItem("userinfo", JSON.stringify({value:userinfo,time:currentTime}));
                    let token = localStorage.getItem("token");
                    let user = localStorage.getItem("userinfo");
                    console.log(token);
                    console.log(user);
                    alert('注册成功!');
                    //window.localStorage.setItem('token', res.data.token);
                    location.href = "index.php";
                }
            },
            error:function(res){
                alert('fail');
            }
        });
    }
</script>
</body>
<script>

</script>
</html>